<template>
  <div>
    <div class="Mycentre" @click="$router.push('/compile')">
      <img :src="$axios.defaults.baseURL+loginImg" alt v-if="loginImg" />
      <img src="@/assets/none.jpg" alt v-else />
      <div class="name">
        <span class="iconfont iconxingbienv" v-if="gender==0"></span>
        <span class="iconfont iconxingbienan" v-else></span>
        <span class="username">{{loginName}}</span>
        <div class="time">{{loginTime}}</div>
      </div>
      <div class="iocn">
        <span class="iconfont iconjiantou1"></span>
      </div>
    </div>
    <Arrange labelText="我的关注" connectText="关注的用户" @acrossClick="$router.push('/attention')" />
    <Arrange labelText="我的跟帖" connectText="跟帖/回复" @acrossClick="$router.push('/follow')" />
    <Arrange labelText="我的收藏" connectText="文章/视频" @acrossClick="$router.push('/enshrine')" />
    <Arrange labelText="设置" connectText="栏目分类" @acrossClick="$router.push('/setcolumn')" />
    <Arrange labelText="退出" connectText @acrossClick="clickOut" />
  </div>
</template>

<script>
//引入子组件
import Arrange from "@/components/Arrange";
export default {
  components: { Arrange },
  data() {
    return {
      loginTime: "",
      loginImg: "",
      loginName: "",
      gender: ""
    };
  },
  methods: {
    acrossRelevant(Relevant) {
      console.log(Relevant);
    },
    clickOut() {
      localStorage.removeItem("token");
      localStorage.removeItem("id");

      this.$router.replace({ path: "/login" });
      //    this.$router.push({ path: "./" });replace和push的区别在于push会把新的路由添加到最后一位，而replace会`替换`最后的路由。
      //   this.$router.push("./");这种写法也行,如果你传入字符串， 他默认就当你是 path 了
    }
  },
  mounted() {
    //加载页面渲染,不是一定要点击事件才行
    this.$axios({
      url: "/user/" + localStorage.getItem("id"),
      method: "GET",
      headers: {
        //请求头
        Authorization: "Bearer " + localStorage.getItem("token") //'Authorization'授权意思,'bearer '固定写法,'持有者'的意思,后面要加个空格
      }
    }).then(res => {
      console.log(res); //打印res

      //解构方便取值
      if (res.data.message == "获取成功") {
        //获取成功后将res的用户数据赋给data动态渲染页面
        const { create_date, head_img, nickname, gender } = res.data.data;
        this.loginTime = create_date.split("T")[0];
        this.loginImg = head_img;
        this.loginName = nickname;
        this.gender = gender;
        console.log(res.data.message);
      }
    });
  }
};
</script>
<style lang="less" scoped>
.iconjiantou1 {
  font-size: 5vw;
  color: #e4e4e4;
}
.Mycentre {
  padding: 7.222vw 4.444vw 7.222vw 5.556vw;
  display: flex;
  align-items: center;
  border-bottom: 4px solid #d8e5f6;
  background-image: url("../../assets/bgcimg.jpg");
  img {
    width: 19.444vw;
    height: 19.444vw;
    // object-fit: cover;
    border-radius: 26.111vw;
  }
  .name {
    margin-left: 2.778vw;
    flex: 1;
    .iconxingbienv {
      color: #ec46bb;
      font-size: 5vw;
    }
    .username {
      margin-left: 1.389vw;
      color: #333;
      font-size: 3.889vw;
    }
    .time {
      margin-top: 1.111vw;
      color: #999;
      font-size: 3.889vw;
    }
  }
}
</style>